<template>
  <el-card :body-style="{ padding: '10px 20px 20px 20px' }" class="project-card-mini">
    <div class="project-header">
      <h3>{{ project.projectName || '未命名项目' }}</h3>
    </div>

    <el-divider style="margin-top: 2px; margin-bottom: 8px;"></el-divider>

    <!-- 项目信息 -->
    <div class="project-body">
      <p><strong>评估金额:</strong> {{ project.amount ? `¥${project.amount}` : '未评估' }}</p>
      <p>
        <strong>评估状态:</strong>
        <el-tag :type="getStatusType(project.status)">
          {{ getStatusLabel(project.status) }}
        </el-tag>
      </p>
      <p><strong>创建时间:</strong> {{ formatDate(project.createTime) }}</p>
      <p><strong>截止时间:</strong> {{ formatDate(project.dueDate) }}</p>

      <el-tooltip
          class="box-item"
          effect="dark"
          :content="project.remark || '无备注'"
          placement="top"
      >
        <p class="remark-text">
          <strong>备注信息:</strong> {{ project.remark || '无备注' }}
        </p>
      </el-tooltip>
    </div>

    <div class="progress-section">
      <el-progress
          :text-inside="true"
          :stroke-width="18"
          :percentage="project.progress || 0"
          :color="getProgressColor(project.progress || 0)"
      />
    </div>
  </el-card>
</template>



<script lang="ts" setup>
import { ElCard, ElTag, ElDivider, ElProgress } from 'element-plus';

const props = defineProps<{
  project: {
    projectName: string;
    amount?: number;
    status: string;
    createTime?: string;
    completeTime?: string;
    dueDate?: string;
    remark?: string;
    progress?: number;
  };
}>();

const getStatusLabel = (status: string) => {
  switch (status) {
    case '未开始':
      return '未开始';
    case '评估中':
      return '评估中';
    case '评审中':
      return '评审中';
    case '已完成':
      return '已完成';
    default:
      return '未知状态';
  }
};

const getStatusType = (status: string) => {
  switch (status) {
    case '未开始':
      return 'info';
    case '评估中':
      return 'danger';
    case '评审中':
      return 'success';
    case '已完成':
      return 'primary';
    default:
      return 'info';
  }
};

const formatDate = (date?: string | Date) => {
  if (!date) return '未完成';
  const d = new Date(date);
  if (isNaN(d.getTime())) return '无效日期';
  return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
};

// 获取进度条颜色
const getProgressColor = (progress: number) => {
  if (progress < 30) return '#f56c6c'; // 红色：进展缓慢
  if (progress < 70) return '#e6a23c'; // 橙色：中等进展
  return '#5cb87a'; // 绿色：良好进展
};

// 获取进度条状态
const getProgressStatus = (progress: number) => {
  if (progress === 100) return 'success'; // 完成状态
  if (progress < 30) return 'exception'; // 异常状态
  return undefined; // 默认状态
};
</script>


<style lang="scss" scoped>
.project-card {
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 10px 20px 20px 20px;
}

.project-header {
  h3 {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
  }
}

.project-body {
  text-align: left;

  p {
    margin: 5px 0;

    strong {
      margin-right: 5px;
    }
  }

  .remark-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }
}

.progress-bar {
  margin-top: 20px;
}
</style>

